<template>
  <div class="common-layout">
    <el-container>
      <el-container>
        <el-aside width="200px"><NavMenu></NavMenu></el-aside>
        <el-container>
          <el-header height="60px"><Header></Header></el-header>
            <el-main>
              <el-card class="box-card" shadow="hover">
                <template #header>
                  <div class="card-header">
                    <el-breadcrumb separator="/">
                      <el-breadcrumb-item :to="{ path: '/communitypersonnel' }">社区人员管理</el-breadcrumb-item>
                      <el-breadcrumb-item>添加社区人员</el-breadcrumb-item>
                    </el-breadcrumb>
                  </div>
                </template>
                <el-form
                  class="form-style"
                  label-position="top"
                  label-width="100px"
                  :model="formPersonnelAdd"
                  ref="addForm"
                  style="max-width: 930px"
                >
                  <div class="col-1">
                    <el-form-item label="姓名" prop="name" style="width: 250px;">
                      <el-input v-model="formPersonnelAdd.name"/>
                    </el-form-item>
                    <el-form-item label="年龄" prop="old">
                      <el-input v-model="formPersonnelAdd.old" style="width: 250px;"/>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                      <el-radio-group v-model="formPersonnelAdd.sex">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="类型" prop="type">
                      <el-radio-group v-model="formPersonnelAdd.type">
                        <el-radio label="业主">业主</el-radio>
                        <el-radio label="住户">住户</el-radio>
                        <el-radio label="租户">租户</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否居住此社区" prop="live">
                      <el-radio-group v-model="formPersonnelAdd.live">
                        <el-radio label="是">是</el-radio>
                        <el-radio label="否">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </div>
                  <div class="col-2">
                    <el-form-item label="电话" prop="telephone" style="width: 250px;">
                      <el-input v-model="formPersonnelAdd.telephone"/>
                    </el-form-item>
                    <el-form-item label="地址" prop="address">
                      <el-input v-model="formPersonnelAdd.address"/>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                      <el-input
                        v-model="formPersonnelAdd.remark"
                        maxlength="40"
                        :rows="6"
                        placeholder="备注信息"
                        show-word-limit
                        type="textarea"
                      />
                    </el-form-item>
                    <el-form-item style="float: right;">
                      <el-button type="primary" @click="addPersonel">添加</el-button>
                      <el-button @click="clear">取消</el-button>
                    </el-form-item>
                  </div>
                </el-form>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import NavMenu from '@/components/NavMenu.vue'
import Header from '@/components/Header.vue'
import { ElMessage } from "element-plus";

export default {
  name: 'HomeView',
  components: {
    NavMenu,
    Header
  },
  data() {
    return {
      formPersonnelAdd: {
        name: '',
        old: '',
        sex: '',
        address:'',
        telephone:'',
        live:'是',
        type:'住户',
        remark:'',
        creator:'xxxx',
      },
    }
  },
  methods: {
    //添加社区人员
    addPersonel(){
      var that = this;
      //this.$refs.addForm.validate(valid => {
          //if (valid) {
            console.log(this.formPersonnelAdd);
              this.axios
              .post("/community/add", this.formPersonnelAdd)
              .then(function(){
                  ElMessage({type: 'success', message: "添加成功"});
                  //that.$emit("updateData");
                  that.clear();
                  that.$router.push({name: "communitypersonnel"});
              })
              .catch(function (error) {
                  console.log(error);
              });
          // } else {
          //     ElMessage.error("请检查输入的信息！");
          // }
      //})
    },
    //取消
    clear(){
      this.$refs['addForm'].resetFields();
      console.log(this.$refs['addForm'].resetFields())
    }
  }
}
</script>

<style scoped>
:deep(.el-header) { 
  padding: 0;
}
.box-card{
  height: 500px;
  overflow-y:auto;
}
.el-breadcrumb-item{
    float: left;
    line-height: 0px;
    color: var(--el-text-color-regular);
}
.form-style{
  display: flex;
  justify-content: center;
}
.col-1{
    width: 400px;

}
.col-2{
  width: 400px;
}
</style>
